<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="../assert/js/vue2.js"></script>

    <script src="../assert/js/axios.js"></script>

    <link rel="stylesheet" href="../assert/element-ui/lib/theme-chalk/index.css">

    <script src="../assert/element-ui/lib/index.js"></script>


</head>
<style>
    .top-title{

        color: #ffffff;
        font-size: 250%;
        text-shadow: 0 0 .3rem #00d8ff;

        text-align: center;
    }

    .el-header{
        /* line-height: 60px; */

        height: 60px;
        /*background-image: url("../images/head.png");*/
    }
    .el-footer {
        color: #333;
        /* line-height: 60px; */
        height: 60px;
        /*background-image: url("../images/head.png");*/
    }

    .el-aside {
        /*background-color: rgb(53, 167, 142);*/
        color: #333;
        background-color: transparent;
        height: auto;
    }
    .el-main {
        /*background-color: #448be7;*/
        /*background-image: url("../assert/image/背景一.png");*/
    }
    /* 解决边缘不对齐的问题 */
    .el-menu {
        border: none !important;
    }

    .item {
        margin-top: 10px;
        margin-right: 40px;
    }
    .bgimage{
        background-image: url("./front/images/bg01.png");
        background-size: 100%,100%;
        background-repeat: no-repeat;
    }
    .el-menu{

    }

</style>
<body class="bgimage" style="height: 100%; width: 100%">

<div id="app">

    <el-container style="height: 100%; ">
        <el-header  class="top-title" >
            系统控制台
        </el-header >
        <el-container>
            <el-aside width="200px" style="height: 850px;">
                <el-menu
                        :default-active="2"
                        :unique-opened="false"
                        :collapse-transition="false"
                        background-color="transparent"
                        text-color="#bfcbd9"

                >
                    <div v-for="item in menuList" :key="item.id">
                        <el-menu-item  :index="item.id" @click="menuHandle(item,false)">
                            <i class="iconfont" :class="item.icon"></i>
                            <span slot="title">
                                {{item.name}}<el-badge v-if="item.id==4" :value="warning" class="item"></el-badge>
                            </span>
                        </el-menu-item>
                    </div>
                </el-menu>
            </el-aside>
            <el-main >
                <div>
                    <iframe id="mainIframe" :src="iframeUrl" style="width: 100%;height:800px;border: none">
                    </iframe>
                </div>

            </el-main>
        </el-container>
        <el-footer>

        </el-footer>
    </el-container>


</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                menuList: [
                    {
                        id: '2',
                        name: '设备管理',
                        url: 'deviceManage.html',
                        icon: 'el-icon-s-tools'
                    },
                    // {
                    //     id: '3',
                    //     name: '定时任务',
                    //     url: 'scheduledTask.html',
                    //     icon: 'el-icon-time'
                    // },
                    {
                        id: '4',
                        name: '风险警示',
                        url: 'warningInformation.html',
                        icon: 'el-icon-warning'
                    },

                    {
                        id: '6',
                        name: '生猪登记',
                        url: 'pigManage.html',
                        icon: 'el-icon-circle-plus'
                    },

                    {
                        id: '7',
                        name: '猪种溯源',
                        url: 'orderList.html',
                        icon: 'el-icon-view'
                    },
                    {
                        id:'8',
                        name: '大数据界面',
                        url: 'front/index.html'

                    }
                    //   ],
                    // },
                ],
                iframeUrl: 'deviceManage.html',
                headTitle: '设备管理',
                goBackFlag: false,
                loading: true,
                timer: null,


                warning: 0,
            }
        },
        methods:{
            goBack() {
                // window.location.href = 'javascript:history.go(-1)'
                const menu = this.menuList.find(item=>item.id===this.menuActived)
                // this.goBackFlag = false
                // this.headTitle = menu.name
                this.menuHandle(menu,false)
            },
            menuHandle(item, goBackFlag) {
                if(item.id === '8')
                    window.location.href = item.url;
                else {
                    this.loading = true
                    this.menuActived = item.id
                    this.iframeUrl = item.url
                    this.headTitle = item.name
                    this.goBackFlag = goBackFlag
                    this.closeLoading()
                }

            },
            closeLoading(){
                this.timer = null
                this.timer = setTimeout(()=>{
                    this.loading = false
                },1000)
            },
            getWarningNum(){
                var _this = this;
                axios.get("/warning/getNum").then(function (resp) {
                   _this.warning =  resp.data;
                })
            }
        },
        created(){
            this.getWarningNum();
        }
    });
</script>
</html>